<template>
    <canvas id="lime-painter"></canvas>
    <div style="height: 160px; padding-top:40px;background: radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)">
        <!-- <div style="height: 160px; width: 80%; margin: 0 auto; background: linear-gradient(-76deg,#000 0%, #ff5000 100%)"></div> -->
    </div>
    <!-- <img :src="path" alt="" /> -->
</template>


<script>
// import { Painter } from "./painter";
import {Painter} from '../../../src/index'
import { image, text,test, poster2, poster, test3} from "./data";
export default {
    data() {
        return {
            path: "",
        };
    },
    async mounted() {
        const canvas = document.querySelector("#lime-painter");
        const context = canvas.getContext("2d");
        const pixelRatio = window.devicePixelRatio;
        const painter = new Painter({
            id: "lime-painter",
            context,
            canvas,
            pixelRatio,
            width: canvas.offsetWidth,
            height: canvas.offsetHeight,
        });
       
        await painter.source(test3);
        await painter.render();
        this.path = painter.save();
    },
};
</script>


<style scoped>
#lime-painter {
    width: 100%;
    height: 100%;
}
</style>
